<template>
  <el-card>
    <div slot="header">
      <h3>新增销售区域</h3>
    </div>
    <div>
      <AddHeader :can-select-supply="isProductInfo" />
      <el-divider />
      <!-- 发起原因输入框 -->
      <LaunchReasonInput required :reason.sync="launchReason" @getReason="updateLaunchReason" />
      <el-tabs v-model="tabs.current">
        <el-tab-pane label="商品信息" :name="tabs.values.ProductInfo" />
        <el-tab-pane label="进价信息" :name="tabs.values.PurchaseInfo" :disabled="!canOperatePurchase" />
      </el-tabs>
      <transition name="el-fade-in-linear">
        <ProductInfo v-show="tabs.current == tabs.values.ProductInfo" />
      </transition>
      <transition name="el-fade-in-linear">
        <PurchaseInfo v-show="tabs.current == tabs.values.PurchaseInfo" />
      </transition>
    </div>
  </el-card>
</template>
<script>
import AddHeader from './Header/add';
import LaunchReasonInput from '@/components/LaunchReasonInput';
import ProductInfo from './ProductInfo';
import PurchaseInfo from './PurchaseInfo';
import { EVENT_BUS, TABS_OPTIONS, TABS_VALUES } from './constants';
export default {
  components: {
    AddHeader,
    LaunchReasonInput,
    ProductInfo,
    PurchaseInfo,
  },
  data () {
    return {
      launchReason: '', // 发起原因
      tabs: {
        current: TABS_VALUES.ProductInfo,
        list: TABS_OPTIONS,
        values: TABS_VALUES
      },
      canOperatePurchase: false, // 默认首次不能操作进价，提交成功后可操作。每新增关联sku时，进价tab禁用，不可操作
    }
  },
  created () {
    EVENT_BUS.$on('can-operate-purchase', state => {
      this.canOperatePurchase = state
    })
    EVENT_BUS.$on('commit-product-success', () => {
      this.tabs.current = TABS_VALUES.PurchaseInfo
    })
  },
  beforeDestroy () {
    EVENT_BUS.clear()
  },
  computed: {
    isProductInfo () {
      return this.tabs.current == TABS_VALUES.ProductInfo
    }
  },
  methods: {
    // 更新发起原因
    updateLaunchReason (reason) {
      EVENT_BUS._data.launchReason = reason
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-divider--horizontal {
  margin: 15px 0;
}
.el-fade-in-linear-enter-active,
.el-fade-in-linear-leave-active {
  transition: opacity 0.3s ease;
}

.el-fade-in-linear-enter,
.el-fade-in-linear-leave-to {
  opacity: 0;
}
</style>
